<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用样式</title>
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	</head>
	<body>
		<!-- 
			1. 列表
				无序列表(<ul><li>...</li></ul>)  class="list-unstyled" 
				有序列表(<ol><li>...</li></ol>)  class="list-inline"
				定义列表(<dl><dt>...</dt><dd>...</dd></dl>)  class="dl-horizontal"
			
			2. 代码风格样式
				①内联代码
				通过 <code> 标签包裹内联样式的代码片段。
				②用户输入
				通过 <kbd> 标签标记用户通过键盘输入的内容。 （快捷键）
				③代码块
				多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
				
			3. 表格
				
				
		 -->
		 
		 <!-- 无序列表 -->
		 <ul>
			 <li>无序项目列表一</li>
			  <li>无序项目列表二</li>
		 </ul>
		 
		 <!-- 去点列表 class="list-unstyled" -->
		 <ul class="list-unstyled">
		 			 <li>无序项目列表一</li>
		 			  <li>无序项目列表二</li>
		 </ul>
		 
		 <hr>
		 
		 <!-- 有序列表 -->
		 <ol>
			 <li>有序项目列表一</li>
			  <li>有序项目列表一</li>
		 </ol>
		 
		 <ol class="list-inline">
		 			 <li>有序项目列表一</li>
		 			  <li>有序项目列表一</li>
		 </ol>
		 
		 <hr>
		
		 <!-- 定义列表 -->
		 <dl class="dl-horizontal">
			 <dt>HTML</dt>
			 <dd>超文本标记语言</dd>
			 <dt>CSS</dt>
			 <dd>层叠样式表是一种样式语言</dd>
		 </dl>
		 
		 <hr color="red">
		 
		 <!-- 2. 代码风格样式 -->
		 <!--  ①使用code-->
		 this is a simple;
		 <code>this is a simple;</code>
		 <br>
		  <code>
			  this is a simple;<br>
			  this is a simple;<br>
			  this is a simple;
		  </code>
		  <hr>
		  <!-- ②  kbd-->
		  <p>使用Ctrl + S进行保存</p>
		  <p>使用<kbd>Ctrl </kbd>+<kbd>S</kbd>进行保存(kbd标签!)</p>
		  <hr >
		  <!-- ③pre   代码会保留原本样式-->
		  <pre>
			  public class HelloWorld {
			  	public static void main(String[] args) {
			  		System.out.println("HelloWorld");
			  	}
			  }
		  </pre>
		  
		  <!-- 显示HTML代码需要使用字符实体 -->
		  <pre>
			<h2>你好,俊豪!</h2>
			&lt;h2&gt;你好,俊豪!&lt;/h2&gt;
		  </pre>
		  
		  <!-- 当长度超过指定值,可以添加滚动条!  class="pre-scrollable"-->
		  <pre class="pre-scrollable">
			  <ol>
				  	  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
					  <li>......</li>
			  </ol>
		  </pre>
		  
		  <!-- 3. 表格样式 -->
		  <table class="table table-striped table-bordered table-hover">
			  <tr class="active">
				  <th>javaSE</th>
				  <th>数据库</th>
				  <th>JavaScript</th>
			  </tr>
			  <tr class="success">
				  <td>面向对象</td>
				  <td>MySQL</td>
				  <td>json</td>
			  </tr>
			  <tr class="info">
				  <td>面向对象</td>
				  <td>MySQL</td>
				  <td>json</td>
			  </tr>
			  <tr class="danger">
				  <td>面向对象</td>
				  <td>MySQL</td>
				  <td>json</td>
			  </tr>
			  
		  </table>
		  
		 
	</body>
</html>